<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册幻灯片演示</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .demo-controls {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .demo-controls h3 {
            margin-bottom: 15px;
            color: #333;
        }
        
        .control-group {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .input-group input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .demo-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .demo-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
        }
        
        .demo-btn.secondary {
            background: linear-gradient(135deg, #f093fb, #f5576c);
        }
        
        .demo-btn.success {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
        }
        
        .demo-btn.warning {
            background: linear-gradient(135deg, #43e97b, #38f9d7);
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1><i class="fas fa-images"></i> 相册幻灯片演示</h1>
            <div class="controls">
                <button id="playBtn" class="control-btn">
                    <i class="fas fa-play"></i>
                </button>
                <button id="fullscreenBtn" class="control-btn">
                    <i class="fas fa-expand"></i>
                </button>
            </div>
        </header>

        <div class="demo-controls">
            <h3><i class="fas fa-cog"></i> 演示控制面板</h3>
            
            <div class="control-group">
                <div class="input-group">
                    <input type="text" id="imageUrl" placeholder="图片URL" value="https://picsum.photos/1200/800?random=99">
                    <input type="text" id="imageTitle" placeholder="图片标题" value="自定义图片">
                    <button class="demo-btn success" onclick="addCustomImage()">
                        <i class="fas fa-plus"></i> 添加图片
                    </button>
                </div>
            </div>
            
            <div class="control-group">
                <button class="demo-btn secondary" onclick="addRandomImages()">
                    <i class="fas fa-random"></i> 添加随机图片
                </button>
                <button class="demo-btn warning" onclick="removeCurrentImage()">
                    <i class="fas fa-trash"></i> 删除当前图片
                </button>
                <button class="demo-btn" onclick="resetToDefault()">
                    <i class="fas fa-undo"></i> 重置为默认
                </button>
            </div>
            
            <div class="control-group">
                <label>自动播放间隔:</label>
                <input type="number" id="autoPlayDelay" value="3000" min="1000" max="10000" step="500">
                <span>毫秒</span>
                <button class="demo-btn" onclick="updateAutoPlayDelay()">
                    <i class="fas fa-clock"></i> 更新间隔
                </button>
            </div>
        </div>

        <main class="main-content">
            <div class="slideshow-container">
                <div class="slide-wrapper">
                    <img id="currentImage" src="" alt="相册图片" class="main-image">
                    <div class="slide-info">
                        <span id="imageCounter" class="image-counter">1 / 10</span>
                        <span id="imageTitle" class="image-title">图片标题</span>
                    </div>
                </div>
                
                <button class="nav-btn prev-btn" id="prevBtn">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="nav-btn next-btn" id="nextBtn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>

            <div class="thumbnail-container">
                <div class="thumbnail-wrapper" id="thumbnailWrapper">
                    <!-- 缩略图将通过JavaScript动态生成 -->
                </div>
            </div>
        </main>

        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // 演示功能函数
        function addCustomImage() {
            const url = document.getElementById('imageUrl').value;
            const title = document.getElementById('imageTitle').value;
            
            if (url && title) {
                slideshow.addImage(url, title);
                alert('图片添加成功！');
            } else {
                alert('请输入图片URL和标题');
            }
        }
        
        function addRandomImages() {
            const count = 3;
            for (let i = 0; i < count; i++) {
                const randomId = Math.floor(Math.random() * 1000);
                slideshow.addImage(
                    `https://picsum.photos/1200/800?random=${randomId}`,
                    `随机图片 ${slideshow.images.length + 1}`
                );
            }
            alert(`已添加 ${count} 张随机图片！`);
        }
        
        function removeCurrentImage() {
            if (slideshow.images.length > 1) {
                slideshow.removeImage(slideshow.currentIndex);
                alert('当前图片已删除！');
            } else {
                alert('至少需要保留一张图片！');
            }
        }
        
        function resetToDefault() {
            // 重置为默认图片
            slideshow.images = [
                {
                    src: 'https://picsum.photos/1200/800?random=1',
                    title: '美丽风景 1'
                },
                {
                    src: 'https://picsum.photos/1200/800?random=2',
                    title: '城市夜景 2'
                },
                {
                    src: 'https://picsum.photos/1200/800?random=3',
                    title: '自然风光 3'
                },
                {
                    src: 'https://picsum.photos/1200/800?random=4',
                    title: '建筑艺术 4'
                },
                {
                    src: 'https://picsum.photos/1200/800?random=5',
                    title: '人文摄影 5'
                }
            ];
            slideshow.generateThumbnails();
            slideshow.loadImage(0);
            alert('已重置为默认图片！');
        }
        
        function updateAutoPlayDelay() {
            const delay = parseInt(document.getElementById('autoPlayDelay').value);
            slideshow.setAutoPlayDelay(delay);
            alert(`自动播放间隔已更新为 ${delay} 毫秒！`);
        }
        
        // 页面加载完成后的提示
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                console.log('🎉 演示页面已加载完成！');
                console.log('💡 提示：您可以尝试添加自定义图片或使用其他演示功能');
            }, 1000);
        });
    </script>
</body>
</html>
